<%@ page contentType="text/html;charset=UTF-8" %>
<%@include file="/common/taglibs.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Jquery UI</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="${ctx }/css/style.css" rel="stylesheet" type="text/css" />
<link href="${ctx }/css/cupertino/jquery-ui-1.8.7.custom.css" rel="stylesheet" type="text/css" />
<link href="${ctx }/css/themes/demos.css" rel="stylesheet" type="text/css" />
<style type="text/css">
	.ui-widget-overlay { background: #aaaaaa/*{bgColorOverlay}*/ url(../css/themes/base/images/ui-bg_flat_0_aaaaaa_40x100.png)/*{bgImgUrlOverlay}*/ 50%/*{bgOverlayXPos}*/ 50%/*{bgOverlayYPos}*/ repeat-x/*{bgOverlayRepeat}*/; opacity: .3;filter:Alpha(Opacity=30)/*{opacityOverlay}*/; }
</style>
</head>
<body>
<div class="main">
  <div class="header">
    <div class="head_2">
      <div class="block_header">
        <div class="logo"><a href="index.jsp"><img src="${ctx }/images/logo2.gif" alt="Home" width="345" height="58" border="0" /></a></div>
        <div class="logo_text">Java技术站</div>
        <div class="Simple_text">
          <form id="form1" name="form1" method="post" action="">
            <label>
              <input name="search" type="text" id="search" size="35" />
            </label>
          </form>
        </div>
        <div class="Simple_text_img"><a href="#"><img src="${ctx }/images/ok.gif" alt="OK" width="30" height="18" border="0" /></a></div>
        <div class="clr"></div>
      </div>
      <div class="menu">
        <ul>
          <li><a href="${ctx }/index.jsp" class="active">Home</a></li>
          <li><a href="${ctx }/services.jsp">About us</a></li>
          <li><a href="${ctx }/services.jsp">Services</a></li>
          <li><a href="${ctx }/portfolio.jsp">Portfolio</a></li>
          <li><a style="border:none;" href="${ctx }/contacts.jsp">Contact us</a></li>
        </ul>
      </div>
      <div class="clr"></div>
      <div class="text">
        <div class="left_t"> 你好，我是柏林，欢迎来到的我博客 </div>
        <div class="right_t"><a href="#"><img src="${ctx }/images/rss.gif" alt="RSS" width="31" height="21" border="0" align="right" /></a><a href="#"><img src="${ctx }/images/twitter.gif" alt="twitter" width="28" height="24" border="0" align="right" /></a></div>
      </div>
    </div>
  </div>
  <div class="clr"></div>
  <div class="body">
    <h2><span>Jquery</span> UI </h2>
  </div>
  <div class="body body_bg">
 	<div style="height: 360px;">
	    <div class="line">
	    	<h3>Button</h3>
	    </div>
	    <div class="line">
	    	<a id="button">Dialog</a>
	    </div>
	    <div class="line">
		    <div id="dialog" title="Basic dialog">
				<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
				<form>
					<fieldset>
						<legend>title</legend>
						<input type="text" name="text"/>
					</fieldset>
				</form>
			</div>
		</div>
	</div>
  </div>
</div>
<div class="clr"></div>
<div class="footer">
  <p align="center"><a href="#">home</a> <a href="#">services</a> <a href="#">portfolio</a> <a href="#">about</a> <a href="#">contact</a> <a href="#">rss feed</a> </p>
  <p align="center">© Copyright 2009. dreamtemplate.com. All Rights Reserved</p>
</div>
<script type="text/javascript" src="${ctx }/jquery/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="${ctx }/jquery/external/jquery.bgiframe-2.1.2.js"></script>
<script type="text/javascript" src="${ctx }/jquery/jquery-ui-1.8.7.custom.min.js"></script>
<script type="text/javascript"><!--
	$(function(){
		$('#dialog').dialog({
			autoOpen : false,
			width : 400,
			buttons : {
				"Cancel" : function(){
					$(this).dialog('close');
				}
			},
			modal: true
		});
		$('a','.line').button();
		$('#button').click(function(){
			$('#dialog').dialog('open');
		});
	});
--></script>
</body>
</html>